<template>
	<div class="hotSong"  :style="{paddingBottom:showBar?'50px':''}">
		<div class="hotImg">
			<img :src="hotImage.coverImgUrl">
		</div>
		<div class="hotList" v-if="(index<20)" v-for="(item,index) in hotSongLits" @click="songId(item.id,index)">
			<div class="numBox">{{index+1}}</div>
			<div class="hotName">
				<p>
					{{item.name}}
					<span>{{item.alia[0]}}</span>
				</p>
				<p>{{item.ar[0].name}} - {{item.al.name}}</p>
			</div>
			<div class="iconBox">
				<i class="iconfont" :class="playingIndex==index? 'icon-zanting':'icon-bofang'"></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				hotImage:[],
				hotSongLits:[],
				playList:[],
				lrcTime:[],
				lrcStr:[],
			}
		},
		methods:{
			songId(id,index){
				let audioSrc = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
				this.audio.transmit(audioSrc)
				
				this.axios({
					url:'/song/detail'+`?ids=${id}`
				}).then(res=>{
					console.log(res.data.songs)
					this.$store.commit("setCurrentSong",res.data.songs[0])
				})
				this.$store.commit("playListState",this.playList)
				this.$store.commit("setPlayingIndex",index)
				
				let playList = this.$store.state.playList;
				let playingIndex = this.$store.state.playingIndex;
				this.axios({
					url:'https://api.imjad.cn/cloudmusic/?type=lyric&id=' + playList[playingIndex]
				}).then(res=>{
					console.log(res)
					this.lrcTime = [];
					this.lrcStr = [];
					let lrc = res.data.lrc.lyric.split("\n");
					lrc.pop(1);
					let reg = /^(\[.*\])(.*)$/;
					// window.console.log(lrc);
					lrc.forEach((val)=>{           
						let valres = reg.exec(val);
						if(!valres){return;}
						this.lrcTime.push(valres[1]);
						this.lrcStr.push(valres[2]);
					});
					console.log(this.lrcTime,this.lrcStr)
					this.$store.commit("currentLyric",this.lrcStr)
				})
			}
		},
		created(){
			this.axios({
				url:'top/list?idx=1'
			}).then(res=>{
				this.hotImage = res.data.playlist
				this.hotSongLits = res.data.playlist.tracks
				this.playList = res.data.playlist.tracks.map(e=>e.id)
				console.log(res.data.playlist )
			})
		},
		computed:{
			showBar(){
				return this.$store.state.currentSong.al.id
			},
			playingIndex(){
				return this.$store.state.playingIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hotSong{
		.hotImg{
			width: 100vw;
			height: 25vh;
			>img{
				width: 100%;
				height: 100%;
			}
		}
		.hotList{
			display: flex;
			align-items: center;
			.numBox{
				width: 12%;
			}
			.hotName{
				width: 79%;
				padding: 6px 0;
				text-align: left;
				>p:first-child{
					>span{
						color: #888;
						margin-left: 4px;
					}
				}
				>p:last-child{
					font-size: 12px;
					color: #888;
				}
			}
			.iconBox{
				>i{
					font-size: 22px;
					color: gray;
				}
			}
		}
	}
</style>
